<template>
	<view class="page record_patient_page">
		<uni-forms :label-width="90" ref="form" :modelValue="formData">
			<view class="form_type">
				<view class="form_type_title required">
					基本信息
				</view>
				<uni-forms-item label="姓名" required name="name">
					<view class="forms_input">
						<input type="text" placeholder="请输入真实姓名" v-model="formData.name" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="身份证" required name="idCard">
					<view class="forms_input">
						<input type="text" placeholder="请输入证件号" v-model="formData.idCard" @blur="getIdCard" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="出生日期" name="birthDate">
					<picker class="forms_picker" :value="formData.birthDate" mode="date" start="1944-1-1" end="2024-5-29"
						@change="getBirthDay">
						<view class="forms_input">
							<input type="text" placeholder="请选择出生日期" disabled v-model="formData.birthDate" />
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex">
					<view class="checkbox_group">
						<view class="radio_btns" :class="{'active': item.value == formData.sex}" v-for="item in radioType"
							:key="item.value" @click="getUserSex(item)">
							{{item.text}}
						</view>
					</view>
				</uni-forms-item>
			</view>
			<view class="form_type">
				<view class="form_type_title">
					补充信息（选填）
				</view>
				<uni-forms-item label="患者地区" name="area">
					<picker class="forms_picker" mode="region" @change="getPatientRegion">
						<view class="forms_input">
							<input type="text" placeholder="请选择地区" disabled v-model="formData.patientRegion" />
						</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="身高" name="height">
					<view class="forms_input">
						<input type="text" placeholder="请输入身高" v-model="formData.height" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="体重" name="weight">
					<view class="forms_input">
						<input type="text" placeholder="请输入体重" v-model="formData.weight" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="既往病史" label-position="top" name="medicalHistory">
					<view class="forms_input">
						<textarea v-model="formData.medicalHistory" placeholder="请输入既往病史" auto-height :maxlength="500"></textarea>
					</view>
				</uni-forms-item>
				<uni-forms-item label="过敏史" label-position="top" name="allergyHistory">
					<view class="forms_input">
						<textarea v-model="formData.allergyHistory" placeholder="请输入过敏史" auto-height :maxlength="500"></textarea>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view class="btns record_patient_page_btns" :class="{'gray':!isAgree}" @click="submit">
			{{type=='edit'?'修改':'保存'}}
		</view>
		<view class="treaty">
			<view class="radio" :class="{'active':isAgree}">
				<uni-icons type="checkmarkempty" :size="8" color="#FFF" v-if="isAgree"></uni-icons>
			</view>
			<view class="label">
				我已阅读并遵守 <text class="blue" @click="isAgree = true">《服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		insertPatientInfo,
		updatePatientInfo
	} from '@/api/index.js'
	import {
		getUserInfo
	} from "@/utils/auth.js"
	import {
		CheckIdCard
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				isAgree: false,
				radioType: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2,
				}],
				type: '',
				formData: {
					name: "",
					idCard: "",
					birthDate: "",
					sex: "",
					patientRegion: "",
					height: "",
					weight: "",
					medicalHistory: "",
					allergyHistory: "",
				},
			}
		},
		onLoad(options) {
			if (options.type == 'edit') {
				this.type = options.type
				this.formData = JSON.parse(options.item)
			}
		},
		methods: {
			insertPatientInfo(from) {
				if (this.type == 'edit') {
					updatePatientInfo({
						...from,
					}).then(res => {})
					uni.showToast({
						title: '修改成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				} else {
					insertPatientInfo({
						...from,
					}).then(res => {
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}).catch(err => {})
				}
			},
			getIdCard() {
				if (CheckIdCard(this.formData.idCard)) {
					this.formData.birthDate = this.$IdCard(this.formData.idCard, 1)
					this.formData.sex = this.$IdCard(this.formData.idCard, 2)
				}
			},
			// 获取生日
			getBirthDay(e) {
				this.formData.birthDate = e.detail.value
			},
			// 获取性别
			getUserSex(item) {
				this.formData.sex = item.value
			},
			getPatientRegion(e) {
				this.formData.patientRegion = e.detail.value.join('-')
			},
			// 触发提交表单
			submit() {
				if (!this.isAgree) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读《服务协议》'
					})
					return
				}
				if (!this.formData.name) {
					uni.showToast({
						icon: 'none',
						title: '请先填写患者姓名'
					})
					return
				}
				if (!CheckIdCard(this.formData.idCard)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的身份证'
					})
					return
				}
				this.insertPatientInfo({
					...this.formData,
					appUserid: getUserInfo().id,
					// openId: getUserInfo().openId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record_patient_page {
		padding: 0;
		background-color: #FAFAFA;

		.gray {
			background: #999;
		}

		.record_patient_page_btns {
			padding: 40rpx 0;
			margin: 80rpx 50rpx 0 50rpx;
		}

		.treaty {
			padding: 50rpx 0;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;

			.radio {
				width: 30rpx;
				height: 30rpx;
				border-radius: 100%;
				border: 1px solid #999;
				background-color: #FFF;
				box-sizing: border-box;
				margin-right: 20rpx;
				text-align: center;
				line-height: 24rpx;

				&.active {
					border: none;
					color: #FFF;
					background-color: #3B6CFE;
				}
			}

			.blue {
				color: #3B6CFE;
			}
		}

		.form_type {
			padding: 30rpx 40rpx;
			background-color: #FFF;
			margin-bottom: 30rpx;

			.form_type_title {
				position: relative;
				margin-bottom: 30rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;

				&.required {
					&::before {
						content: '*';
						position: absolute;
						left: -20rpx;
						top: 50%;
						transform: translateY(-50%);
						color: #F00;
					}
				}
			}

			.checkbox_group {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.radio_btns {
					padding: 20rpx 60rpx;
					color: #333333;
					background-color: #EEEEEE;
					border-radius: 100rpx;
					margin-right: 30rpx;

					&:last-child {
						margin: 0;
					}

					&.active {
						color: #3B6CFE;
						background-color: #F3F8FF;
						border: 1px solid #3B6CFE;
					}
				}
			}

			.forms_picker {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.forms_input {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				text-align: right;

				textarea {
					width: 100%;
					height: 100%;
				}

				input {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>